<template>
   <div>
      <div class="login_top clearfix">
         <a href="/" class="login_logo"><img src="/static/images/logo02.png"></a>
      </div>
      <div class="login_form_bg" id='app'>
         <div class="login_form_wrap clearfix">
            <div class="login_banner fl"></div>
            <div class="slogan fl">商品美 · 种类多 · 欢迎光临</div>
            <div class="login_form fr">
               <div class="login_title clearfix">
                  <a href="javascript:;" class="cur">账户登录</a>
               </div>
               <div class="form_con">
                  <div class="form_input cur">
                     <form id="login-form" @submit.prevent="on_submit">
                        <input type="text" v-model="username" @blur="check_username" name="" class="name_input"
                               placeholder="请输入用户名或手机号">
                        <div v-show="error_username" class="user_error" v-cloak>请填写用户名或手机号</div>
                        <input type="password" v-model="password" @blur="check_pwd" name="pwd" class="pass_input"
                               placeholder="请输入密码">
                        <div v-show="error_pwd" class="pwd_error" v-cloak>{{ error_pwd_message }}</div>
                        <div class="more_input clearfix">
                           <input type="checkbox" v-model="remember">
                           <label>记住登录</label>
                           <a href="#">忘记密码</a>
                        </div>
                        <input type="submit" name="" value="登 录" class="input_submit">
                     </form>
                  </div>
               </div>
               <div class="third_party">
                  <a @click="" class="qq_login">QQ</a>
                  <a href="#" class="weixin_login">微信</a>
                  <a :href="weibo_url"><img src="/static/images/16.png" class="weibo"></a>
                  <a href="/register" class="register_btn">立即注册</a>
               </div>

            </div>
         </div>
      </div>
      <BaseBodyer></BaseBodyer>
   </div>
</template>

<script>
   import BaseBodyer from "../Header/BaseBodyer";
   export default {
      name: "Login",
      components: {
         BaseBodyer,
      },
      data() {
         return {
            username: localStorage.getItem('username'),
            password: '',
            remember: localStorage.getItem('remember'),

            error_username: false,
            error_pwd: false,
            error_pwd_message: '请填写密码',
            weibo_url: 'https://api.weibo.com/oauth2/authorize?client_id=57039866&redirect_uri=http://127.0.0.1:8080/oauth_callback',
         }
      },
      methods: {
         check_username() {
            // 校验是否输入账号
            this.error_username = !this.username
         },
         check_pwd() {
            // 校验是否输入密码
            if (this.error_username) {
               alert('请输入账号');
               this.check_username();
               return
            }
            this.error_pwd = !this.password
         },
         on_submit() {
            if (!this.password) {
               this.check_pwd();
               alert('请输入密码');
            } else {
               this.$axios({
                  url: 'userapp/user/',
                  method: 'PUT',
                  data: {
                     username: this.username,
                     password: this.password,
                  }
               }).then(resp => {
                  alert(resp.data.msg);
                  if (resp.data.code === 200) {
                     sessionStorage.setItem('name', resp.data.name);
                     sessionStorage.setItem('token', resp.data.token);
                     if (this.remember) {
                        localStorage.setItem('username', resp.data.name);
                        localStorage.setItem('remember', this.remember);
                     } else {
                        localStorage.removeItem('username');
                        localStorage.removeItem('remember');
                     }
                     let redirect = this.$route.query.rediect;
                     if (redirect) {
                        this.$router.push(redirect)
                     } else {
                        this.$router.push('/')
                     }
                  }
               }).catch(error => {
                  console.log(error)
               })
            }
         },
      },
      computed: {},
      filters: {},
      watch: {},
   }
</script>

<style scoped>
   .weibo {
      margin-left: 15px;
      margin-top: 14px;
   }
</style>
